<!-- 新增、修改达成录入 -->
<template>
  <div class='add_or_edit_enter'>
    <div v-if="flag=='add'">
      <Form ref="formValidate" :model="formValidate" :label-width="80">
        <FormItem label="选择周：" required>
          <Row>
            <Col span="8">
            <Select v-model="formValidate.month" placeholder="请选择">
              <Option :value="item.month" v-for="item in monthList" :key="item.month"
                @click.native='changeMonth(item)'>{{item.month}}</Option>
            </Select>
            </Col>
            <Col span="8" offset="1">
            <Select v-model="formValidate.week" placeholder="请选择">
              <Option :value="item.week" v-for="item in weekList" :key="item.week"
                @click.native='changeWeek(item)'>{{item.week}}</Option>
            </Select>
            </Col>
          </Row>
        </FormItem>
      </Form>
    </div>
    <div v-else>
      <span class="week_full">{{editData.weekFull}}</span>
    </div>
    <div class="month-content">
      <!--营销线路目标拆分-->
      <div v-if="productTableData.length>0">
        <p class="title">营销线路目标拆分</p>
        <dt-edit-table :columns="marketColumns" :tableData="tableData"
          :operateType="operateType" maxHeight='1000px'></dt-edit-table>
      </div>
      <!-- 产品线路目标拆分-->
      <div v-if="productTableData.length>0">
        <p class="title">产品线路目标拆分</p>
        <product-table :columns="productColumns" :tableData="productTableData"
          :operateType="operateType"></product-table>
      </div>
    </div>
    <div class="btn-content flex flex-horizontal-center">
      <Button @click="cancleFun">关闭</Button>
      <Button type="primary" @click="submitExamine" :loading="loading">确认</Button>
    </div>
  </div>
</template>

<script>
  import dtEditTable from '../targetManage/dt-edit-table.vue'
  import productTable from '../targetManage/productTable.vue'
  import columnsConfig from './columns'
  import reachApi from '@/biz/synthetic/targetReach'
  import syntheticCommonMgr from '@/biz/synthetic/syntheticCommon'
  import dt from '@dt/dt'

  export default {
    components: { dtEditTable, productTable },
    data() {
      return {
        formValidate: {
          month: '',
          week: '',
          weekBegin: '',
          weekEnd: '',
        },
        marketColumns: [],
        tableData: [],
        productColumns: [],
        productTableData: [],
        operateType: 1, // 用于区分0，查看,1，新增,2，调整 ,
        monthList: [],
        weekList: [],
        loading: false,
        flag: 'add',
        editData: {},
      }
    },
    computed: {},
    watch: {},
    methods: {
      //取消
      cancleFun() {
        this.$store.commit('deleteroutefun', this.$route.meta.title)
        this.$router.go(-1)
      },
      //保存
      submitExamine() {
        this.loading = true
        if (!(this.formValidate.weekBegin && this.formValidate.weekEnd)) {
          return false
        }
        let weekFull =
          this.flag == 'add' ?
          this.formValidate.month + this.formValidate.week :
          this.editData.weekFull
        let buildingId = this.$dt.buildInfo().housesId
        let marketDataList = syntheticCommonMgr.resovleSubmitArr(this.tableData)
        let productDataList = this.productTableData
        let index = syntheticCommonMgr.compareTotal(
          marketDataList[marketDataList.length - 1],
          productDataList[productDataList.length - 1]
        )
        if (index != -1) {
          this.$Message.error('营销线路实际达成与产品线路实际达成不一致')
          this.loading = false
          return false
        }
        let params = {
          reachWeekMarketReqs: marketDataList,
          reachWeekProductReqs: productDataList,
          weekFull,
          buildingId,
          beginWeekDay: this.formValidate.weekBegin,
          endWeekDay: this.formValidate.weekEnd,
        }
        if (this.flag == 'add') {
          reachApi
            .getReachInsertReach(params)
            .then((res) => {
              this.$Message.success('新增成功！')
              this.$emit('changeListData')
              this.$store.commit('deleteroutefun', this.$route.meta.title)
              this.$router.go(-1)
            })
            .catch((err) => {
              this.loading = false
            })
        } else if (this.flag == 'edit') {
          reachApi
            .updateReach(params)
            .then((res) => {
              this.loading = false
              this.$Message.success('编辑成功！')
              this.$emit('changeListData')
              this.$store.commit('deleteroutefun', this.$route.meta.title)
              this.$router.go(-1)
            })
            .catch((err) => {
              this.loading = false
            })
        }
      },
      getReachYearsAndWeek() {
        let buildingId = this.$dt.buildInfo().housesId
        reachApi.getReachYearsAndWeek({ buildingId }).then((res) => {
          this.monthList = res
        })
      },
      init(weekBegin, weekEnd) {
        this.tableData = []
        this.productTableData = []
        let params = {
          buildingId: this.$dt.buildInfo().housesId,
          weekBegin,
          weekEnd,
        }
        reachApi.insertReachInfo(params).then((res) => {
          console.log(res)
          this.tableData = res.tableInitList
          this.productTableData = res.reachWeekProductReqs
        })
      },
      //月份改变
      changeMonth(data) {
        console.log(data)
        this.weekList = data.optionalWeeks
      },
      //周改变
      changeWeek(data) {
        console.log(data)
        this.formValidate.weekBegin = data.weekBegin
        this.formValidate.weekEnd = data.weekEnd
        this.init(data.weekBegin, data.weekEnd)
      },
    },
    created() {
      this.editData = dt.session.get('targetReach_params') ?
        dt.session.get('targetReach_params') : {}
      this.flag = this.editData.type
      if (this.flag == 'edit') {
        console.log(this.editData, 'editData')
        this.formValidate.weekBegin = this.editData.beginWeek
        this.formValidate.weekEnd = this.editData.endWeek
        this.init(this.editData.beginWeek, this.editData.endWeek)
      }
    },
    mounted() {
      if (this.flag == 'add') {
        this.getReachYearsAndWeek()
      }
      this.productColumns = columnsConfig.productColumns(this.operateType)
      this.marketColumns = columnsConfig.marketColumns(this.operateType)
    },
  }
</script>
<style lang='scss' scoped>
  .add_or_edit_enter {
    padding: 15px;

    .ivu-btn {
      margin: 0 20px;
    }

    .month-content {
      padding-right: 10px;
      margin-top: 20px;
      // max-height: 650px;
      height: calc(100% - 110px);
      overflow-y: auto;
      margin-bottom: 20px;

      .title {
        margin: 15px 0;
        padding-left: 15px;
        border-left: 3px solid #2d8cf0;
      }

      .label {
        .require {
          margin-right: 10px;
          color: #ed4014;
        }
      }

      .ivu-input-wrapper {
        width: 80%;

        ::v-deep textarea.ivu-input {
          min-height: 200px;
        }
      }
    }

    ::v-deep .elx-table .elx-table--empty-placeholder {
      top: 48px !important;
      height: 48px !important;
    }

    .week_full {
      border: 1px solid #ccc;
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      font-weight: 600;
      color: #2d8cf0;
      display: inline-block;
    }
  }
</style>